import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Typography, Alert } from 'antd';
import styles from './Welcome.less';

import {
  SmileOutlined,
  HomeOutlined,

} from '@ant-design/icons';

import { TITLE } from "@/utils/config";
import MotionLayout from '@/layouts/MotionLayout';
// const CodePreview = ({ children }) => (
//   <pre className={styles.pre}>
//     <code>
//       <Typography.Text copyable>{children}</Typography.Text>
//     </code>
//   </pre>
// );

export default () => (
  <PageHeaderWrapper>
    <MotionLayout>
      <Card>
        <Alert
          message={<span><SmileOutlined className={'ant-btn-link'} style={{ marginRight: 10, fontSize: 30 }} />{`欢迎使用${TITLE}-管理后台，产品逐步完善中，敬请期待……`}</span>}
          type="success"
          showIcon={false}
          banner
          style={{
            margin: -12,
            marginBottom: 24,
          }}
        />
        <Typography.Text strong>
          <a target="_blank" rel="noopener noreferrer" href={`${process.env.NODE_ENV === 'development' ? `http://localhost:5793` : ""}/web/dist/`}>
            <HomeOutlined style={{ marginRight: 3, marginLeft: 5 }} />前往门户首页
        </a>
        </Typography.Text>
        {/* <CodePreview> npm run ui</CodePreview>
      <Typography.Text
        strong
        style={{
          marginBottom: 12,
        }}
      >
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://pro.ant.design/docs/available-script#npm-run-fetchblocks"
        >
          获取全部区块
        </a>
      </Typography.Text>
      <CodePreview> npm run fetch:blocks</CodePreview> */}
      </Card>
    </MotionLayout>
  </PageHeaderWrapper>
);
